<template>
  <div id="topic">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ul class="topic-list">
        <router-link tag="li" :to="`/topic/topicdetail?id=${item.id}`" class="topic-item" v-for="item in list" :key="item.id">
          <img :src="item.scene_pic_url" alt class="topic-img" />
          <p class="title">{{item.title}}</p>
          <div class="van-multi-ellipsis--l2 desc">{{item.subtitle}}</div>
          <p class="price">{{item.price_info}}元起</p>
        </router-link>
      </ul>
    </van-list>
  </div>
</template>

<script>
import { topicListaction } from "@/api/topic";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      page: 1,
    };
  },
  methods: {
    onLoad() {
      topicListaction({
        page: this.page,
      }).then((res) => {
        this.list.push(...res.data);
        this.page++;
        this.loading = false;
        if (res.total == this.page - 1) {
          this.finished = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#topic{
    background-color: rgb(244,244,244);
}
.topic-list {
  width: 375px;
  .topic-item {
    width: 375px;
    background-color: #fff;
    margin-bottom: 12px;
    .topic-img {
      width: 375px;
      height: 210px;
    }
    .title {
      width: 375px;
      font-size: 17px;
      text-align: center;
      color: rgb(51, 51, 51);
      margin-top: 12px;
      margin-bottom: 20px;
    }
    .desc {
      width: 375px;
      margin-bottom: 18px;
      padding: 0 10px;
      box-sizing: border-box;
      font-size: 12px;
      text-align: center;
      color: rgb(153, 153, 153);
    }
    .price {
      width: 375px;
      font-size: 13px;
      text-align: center;
      color: rgb(180, 40, 45);
      padding-bottom: 24px;
      box-sizing: border-box;
    }
  }
}
</style>